<script lang="ts">
import { defineComponent, ref, reactive, watch } from "vue";
import { formatAddress, fromWei } from '@/utils/format';
import { getRewardList, getRefRewardList } from "@/api"
import { UserModule } from "@/store/modules/user";


export default defineComponent({
    setup() {
        const open = ref(false);
        const setat = reactive({
            pageNum: 0,
            pageSize: 20,
            tokenType: 0
        });
        const refreshing = ref(false);
        const loading = ref(true);
        const finished = ref(false);
        const list: any = ref([]);
        const onRefresh = () => {
            open.value = true;
            setat.pageNum = 0;
            finished.value = false;
            loading.value = true;
            refreshing.value = true
            onLoad();
        };
        const onLoad = async () => {
            let res
            if (!setat.tokenType) {
                res = await getRewardList(setat);
                if (refreshing.value) {
                    list.value = [];
                    refreshing.value = false;
                }
                list.value = list.value.concat(res.data.data.InvestRewardList || []);
            } else {
                res = await getRefRewardList(setat);
                if (refreshing.value) {
                    list.value = [];
                    refreshing.value = false;
                }
                list.value = list.value.concat(res.data.data.AddrRefList || []);
            }

            loading.value = false;
            setat.pageNum++;
            if (list.value.length >= res.data.data.Total) {
                finished.value = true;
            }
        };
        watch(
            () => UserModule.userAddr,
            (newUserAddr: string) => {
                if (newUserAddr) {
                    onRefresh();
                }
            },
            { immediate: true }
        );
        return {
            open,
            list,
            setat,
            refreshing,
            loading,
            finished,
            onRefresh,
            onLoad,
            formatAddress,
            fromWei,
            UserModule
        };
    },
});
</script>
<template>
    <div class="page">
        <div class="list">
            <van-tabs v-model:active="setat.tokenType" @change="onRefresh">
                <van-tab :title="$t('layout.personalGain')" :name="0"></van-tab>
                <van-tab :title="$t('layout.TeamBenefits')" :name="1"></van-tab>
            </van-tabs>
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list v-model:loading="loading" :finished="finished" :finished-text="$t('layout.noMore')"
                    @load="onLoad">
                    <div class="row" v-for="(item, index) in list" :key="index">
                        <template v-if="item.Address">
                            <div class="cell">
                                <div class="label">
                                    {{ formatAddress(item.Address) }}
                                </div>
                                <div class="reward">
                                    <div class="USDF">{{ item.RefReward || item.Reward }}</div>
                                </div>
                            </div>
                            <div class="time">
                                {{ item.CreatedAt }}
                            </div>
                        </template>
                        <template v-else>
                            <div class="cell">
                                <div class="time" style="margin:0">
                                    {{ item.CreatedAt }}
                                </div>
                                <div class="reward">
                                    <div class="USDF">{{ item.RefReward || item.Reward }}</div>
                                </div>
                            </div>

                        </template>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>

    </div>
</template>
<style lang="less" scoped>
.page {
    margin: 0 15px;

    .van-tabs {
        padding: 15px;
        overflow: hidden;

        &:deep(.van-tabs__wrap) {
            height: 45px;
            background: rgba(11, 166, 98, 0.1);
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid #FFFFFF;

            .van-tabs__nav {
                background: transparent;

                .van-tab {
                    &.van-tab--active {
                        width: 172px;
                        height: 44px;
                        background: #0BA662;
                        border-radius: 8px;
                        color: #fff;
                    }
                }

                .van-tabs__line {
                    display: none;
                }
            }
        }
    }

    .list {
        background: #FFFFFF;
        border-radius: 8px;


        .row {
            padding: 15px;
            border-bottom: 1px solid rgba(136, 136, 136, 0.1);

            .cell {
                display: flex;
                justify-content: space-between;

                .label {
                    flex: 1;
                    font-size: 14px;
                    font-weight: 500;
                    color: #1F2120;
                }

                .endday {
                    flex: 1;
                    font-size: 14px;
                    text-align: center;
                    color: #888888;

                    &.on {
                        color: rgba(239, 64, 52, 1);
                    }
                }

                .reward {
                    flex: 1;
                    text-align: right;
                    font-size: 16px;
                    font-weight: bold;
                    color: #0BA662;
                }
            }

            .time {
                margin-top: 8px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 12px;
                font-weight: 400;
                color: #888888;
            }
        }
    }


}
</style>